<template>
	<view class="content">
		
		<view class="title">
			<image :src="userInfo.usericon" mode=""></image>
			<text>{{userInfo.username}}</text>
		</view>
		
		<view class="input">
			<view class="item">
				<image src="../../static/newGrxx.png" mode=""></image>
				<text>个人信息</text>
				<image src="../../static/more.png" mode=""></image>
			</view>
			<view class="item">
				<image src="../../static/newDdlb.png" mode=""></image>
				<text>订单列表</text>
				<image src="../../static/more.png" mode=""></image>
			</view>
			<view class="item">
				<image src="../../static/newMm.png" mode=""></image>
				<text>修改密码</text>
				<image src="../../static/more.png" mode=""></image>
			</view>
			<view class="item">
				<image src="../../static/newYjfk.png" mode=""></image>
				<text>意见反馈</text>
				<image src="../../static/more.png" mode=""></image>
			</view>
			
		</view>
		
		<button type="primary">退出</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					
					username:'dyl',
					userid:'001'
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.title{
		display: flex;
		align-items: center;
		margin-top: 70rpx;
		position: relative;
		right: 90px;
	}
	.title image{
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-bottom: 80rpx;
		margin-right: 60rpx;
	}
	.title text{
		position: relative;
		bottom: 40rpx;
		color: darkgrey;
	}
	.input{
		width: 90%;
		border-top: #C8C7CC solid 1rpx ;
	}
	.input .item{
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: #C8C7CC solid 1rpx
	}
	.input .item image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 25rpx;
	}
	.input .item text{
		position: relative;
		right: 200rpx;
		color: #939396;
	}
	button{
		margin-top: 70rpx;
		width: 90%;
	}
</style>
